<template>
  <collapse-card title="关联信息">
    <template #header-right>
      <el-button v-permission="['XXXX_GLXX']" type="primary" @click="openModal">关联信息</el-button>
    </template>
    <div class="relate-info">
      <comm-table
        ref="table"
        :columns="columns"
        :data="currentData"
        :pageSize="pageSize"
        :pagination="false"
        :total="total"
        :currentPage="currentPage"
        @onSizeChange="onSizeChange"
        @onCurrentChange="onCurrentChange"
        :default-sort="{ prop: 'sendTime', order: 'descending' }"
      >
        <template slot-scope="{ row, _i }">
          <el-button type="text" @click="cancelRelated(row, _i)">取消关联</el-button>
        </template>
      </comm-table>
    </div>
  </collapse-card>
</template>
<script>
import CollapseCard from '@/components/layout/CollapseCard';
import { queryManualAssociationFlowList } from '@/api/common';
import {handleColumnData} from "../../data-process";
import {BM_DEPT} from "@/common/codeDic";

export default {
  name: 'RelateInfo',
  components: {
    CollapseCard
  },
  props: {
    id: {
      type: String
    },
    columnData: { // 列表数据
      type: Array,
      default(){
        return [];
      }
    },
    isCheckSelectAuth: { // 是否进行勾选权限
      type: Boolean,
      default: false
    },
    selectRule: { // 选择规则
      type: Object,
      default(){
        return {};
      }
    }
  },
  data() {
    return {
      flowId: '',
      columns: [],
      allRelated: [],
      currentPage: 1,
      pageSize: 10000,
      total: 0,
      currentData: []
    };
  },
  mounted() {
    if (this.id) {
      this.flowId = this.id;
      this.fetchData();
      // 初始化表格的列
      this.initColumns();
    }
  },
  methods: {
    /**
     * 初始化表格的列
     */
    initColumns(){
      let columnData = handleColumnData(this, this.columnData, this.isCheckSelectAuth, this.selectRule);
      this.$set(this, 'columns', columnData);
    },
    fetchData() {
      queryManualAssociationFlowList({
        page: 0,
        size: 10000,
        sort: JSON.stringify({ sendTime: 'desc' }),
        searchCondition: JSON.stringify([{ name: 'flowId', op: '=', value: this.flowId, type: '', format: '' }])
      }).then(({ data }) => {
        this.allRelated = data.content;
        this.total = data.totalElements;
        this.onCurrentChange(this.currentPage);
      });
    },
    handleId(id,ifOpen) {
      this.flowId = id;
      ifOpen==='relatedInfo'&&this.openModal();
    },
    /**
     * 打开关联信息弹窗
     */
    openModal() {
      if (this.flowId) {
        const _this = this;
        const glxx_columns = [
          { label: '序号', type: 'index', width: 70 },
          { label: '上报时间', prop: 'sendTime' },
          { label: '信息编号', prop: 'serialNo', width: 300},
          { label: '标题', prop: 'title', width: 300},
          { label: '上报单位', prop: 'createOrgCode',code:BM_DEPT },

        ];
        this.$dgLayer({
          title: '关联信息',
          props: {
            id: this.flowId,
            isCheckSelectAuth: true, // 是否进行勾选权限
            selectRule: {isAssociation: '0'},
            columnData: glxx_columns
          },
          component: require('./InfoModal'),
          area: ['60%', '960px'],
          on: {
            onRelate(list) {
              console.log(list);
              list.forEach((item) => {
                const isExit = _this.allRelated.find((child) => child.id === item.id);
                if (!isExit) {
                  _this.allRelated.push(item);
                }
              });
              _this.total = _this.allRelated.length;
              _this.onCurrentChange(_this.currentPage);
            }
          }
        });
      } else {
        this.$confirm('关联信息需要先保存信息，是否保存信息?').then(() => {
          // this.$refs.tableInfo.searchForm();
          this.$emit('saveInfo', 0, '1', 'relatedInfo');
        });
      }
    },
    /**
     * 取消关联
     */
    cancelRelated(row, _i) {
      this.$confirm('确定取消关联?').then(() => {
        let index_in_arr = _.findIndex(this.allRelated, {id: row.id});

        if(index_in_arr != -1) {
          this.allRelated.splice(index_in_arr, 1);
          this.total = this.allRelated.length;
          this.onCurrentChange(this.currentPage);
        }
      });
    },
    onSizeChange(v) {
      this.pageSize = v;
      this.currentData = this.allRelated.slice(
        (this.currentPage - 1) * this.pageSize,
        (this.currentPage - 1) * this.pageSize + this.pageSize
      );
    },
    onCurrentChange(v) {
      this.currentPage = v;
      this.currentData = this.allRelated.slice(
        (this.currentPage - 1) * this.pageSize,
        (this.currentPage - 1) * this.pageSize + this.pageSize
      );
    }
  }
};
</script>
<style scoped lang="scss">
.relate-info {
  .title-operater {
    display: flex;
    justify-content: space-between;
  }
}
</style>
